<template>
  <div :class="styles['jd-input']">
    <div
      :class="styles.advice"
      :key="adviceIndex"
      v-on:click.self.prevent
      v-if="isShowHotWorld"
      :style="islightHotWorld"
    >{{hotWorlds}}
    </div>
    <input v-model="searchWorld"
           @focusin="lightHotWorld=true"
           @focusout="lightHotWorld=false">
    <div @mouseenter="hoverImg=true"
         @mouseleave="hoverImg=false"
         :class="styles.camera">
      <img src="@/assets/camera.svg" v-show="!hoverImg">
      <img src="@/assets/camera_focus.svg" v-show="hoverImg">
    </div>
    <div :class="styles.search">
      <img src="@/assets/search.svg">
    </div>
  </div>
</template>

<script>
  import styles from './input.scss'
  import {HOT_WORLD} from '@util/constant'

  export default {
    name: "JdInput",
    model: {},
    props: {},
    data() {
      return {
        styles,
        hotWorlds: HOT_WORLD[0].label,
        hoverImg: false,
        adviceIndex: 0,
        searchWorld: '',
        lightHotWorld: false
      }
    },
    computed: {
      isShowHotWorld: function () {
        return !this.searchWorld
      },
      islightHotWorld: function () {
        return this.lightHotWorld ? {color: '#bbb'} : ''
      }
    },
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {
      this.loopChooseWorld()
    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {
      loopChooseWorld() {
        setTimeout(() => {
          if (this.adviceIndex === HOT_WORLD.length - 1) {
            this.adviceIndex = -1
          }
          this.hotWorlds = HOT_WORLD[++this.adviceIndex].label
          this.loopChooseWorld()
        }, 2000)
      }
    }
  }
</script>
